<template>
<div class="main">
  <!-- <LoadingPage v-if="loadingShow"/> -->
  <el-dialog
  title="公告信息"
  :visible.sync="dialogVisible"
  width="58%"
  height="58%"
  :before-close="handleClose">
  <div style="width:88%;height:388px">
    <div style="background:pink;font-size:22px;height:58px;border:1px solid purple;line-height:58px">{{info.title}}</div>
    <div style="background:skyblue;font-size:18px;height:288px;border:1px solid purple;margin-top:8px">{{info.content}}</div>
  </div>
  <!-- <div style="font-size:18px;margin-bottom:8px"><span>标题:{{info.title}}</span></div>
  <div style="font-size:18px"><span>内容:{{info.content}}</span></div> -->
</el-dialog>
   <el-row :gutter="20">
  <el-col :span="12"><div class="grid-content" style="background:#4B81BF">
    <h4 class="tit">实时热点</h4>
    <el-carousel height="328px">
      <el-carousel-item v-for="item in carPic" :key="item.p_id">
        <!-- <el-tooltip v-if="role==3" class="item" effect="dark" content="删除" placement="top-start"><el-button @click="deleteCarousel(item)" icon="el-icon-close" style="position:fixed;right:0;top:0;background:transparent;border:0"></el-button></el-tooltip> -->
        <a :href="item.p_link" target="_blank"><img style="width:100%;height:100%" :src="evUrl+item.p_url" alt=""></a>
      </el-carousel-item>
    </el-carousel>
    <h4>信息公告</h4>
    <div>
      <el-table
    :data="tableData"
    style="width: 100%"
    :header-cell-style="{height:'0px',margin:'0px',color:'#ffffff',textAlign:'center',padding:'0px'}"
    height="226">
      <el-table-column
      width="240">
      <template slot-scope="scope">
        <span>{{scope.row.c_time.slice(0,10)}}</span>
      </template>
    </el-table-column>
      <el-table-column
        prop="c_title"
        width="240"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
      align="right">
          <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handleRead(scope.row)">查看</el-button>
              <!-- <el-tooltip v-if="role==3" class="item" effect="dark" content="删除" placement="top-start"><el-button size="mini" style="border:0" icon="el-icon-close" @click="deleteRead(scope.row)"></el-button></el-tooltip> -->
          </template>
      </el-table-column>

      </el-table>
    </div>

    </div></el-col>
  <el-col :span="12">
    <div class="grid-content"  style="background:#4B81BF"><h4>相关资讯</h4>
        <el-table
    :data="tableData2"
    style="width: 100%"
    :header-cell-style="{height:'0px',margin:'0px',color:'#ffffff',textAlign:'center',padding:'0px'}"
    height="575">
      <el-table-column
      width="150">
      <template slot-scope="scope">
        <span>{{scope.row.n_time.slice(0,10)}}</span>
      </template>
    </el-table-column>
      <el-table-column
      :show-overflow-tooltip="true">
      <template slot-scope="scope">
        <a :href="scope.row.n_area" target="_blank">{{scope.row.n_title}}</a>
      </template>
    </el-table-column>
    <!-- <el-table-column
      align="right">
          <template slot-scope="scope">
              <el-tooltip v-if="role==3" class="item" effect="dark" content="删除" placement="top-start"><el-button style="border:0;padding:0" size="mini" icon="el-icon-close" @click="deleteMyNews(scope.row)"></el-button></el-tooltip>
          </template>
      </el-table-column> -->
    </el-table>
    </div></el-col>
</el-row>
</div>
</template>
<script>
import { getOpenInfo, getNews, getCarouselPic, deleteOpenInfo, deleteNews, deletePicInfo } from '../api/info.js'
export default {
  data () {
    return {
      evUrl: this.$evUrl,
      role: '',
      dialogVisible: false,
      info: {
        title: '',
        content: ''
      },
      // loadingShow: true,
      // fullscreenLoading: true,

      carPic: [],
      tableData: [],
      tableData2: []
    }
  },
  methods: {
    // 删除轮播图
    deleteCarousel (row) {
      deletePicInfo({ p_id: row.p_id, p_url: row.p_url }).then(({ data }) => {
        this.$message.success('删除成功')
        return this.carouselInfo()
      })
    },
    // 删除公告
    deleteRead (row) {
      deleteOpenInfo({ c_id: row.c_id }).then(({ data }) => {
        if (data.status === 200) {
          this.$message.success(data.message)
          return this.openIfo()
        }
      })
    },
    // 删除新闻资讯
    deleteMyNews (row) {
      deleteNews({ n_id: row.n_id }).then(({ data }) => {
        if (data.status === 200) {
          this.$message.success(data.message)
          return this.newsInfo()
        }
      })
    },

    // 公告
    openIfo () {
      getOpenInfo({ openInfo: '你好' }).then(({ data }) => {
        // console.log(data)
        this.tableData = data
      })
    },
    handleRead (row) {
      this.dialogVisible = true
      // console.log(row)
      this.info.title = row.c_title
      this.info.content = row.c_content
    },
    // 关闭单框
    handleClose () {
      this.dialogVisible = false
    },
    // 新闻
    newsInfo () {
      getNews({ newInfo: '新闻' }).then(({ data }) => {
        this.tableData2 = data
      })
    },
    // 轮播图
    carouselInfo () {
      getCarouselPic({ carouselInfo: '轮播图' }).then(({ data }) => {
        this.carPic = data
        // console.log(data)
        // this.fullscreenLoading = false
      })
    }
  },
  mounted () {
    this.openIfo()
    this.newsInfo()
    this.carouselInfo()
    if (window.localStorage.getItem('token')) {
      this.role = JSON.parse(window.localStorage.getItem('userInfo')).role
    }
  }

}
</script>
<style lang='less' scoped>
.main{
  height:100%;
  // border-bottom: 1px solid rebeccapurple;
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
}

</style>
